<template>
	<div id="circlePhotoGraph">
		<div class="img-wrapper">
			<div class="image-item-wrapper" v-for="(item,index) of imgList" :key="index" @click="prevImg(item,index)">
				<image :src="item.img_url" mode="aspectFill" class='image-item'></image>
				<div class="del-picture-btn" @click.stop="delImagesList(item,index)" v-show="deleteFlag">
				    <image src="/static/img/redXX.png" />
				</div>
			</div>

			<div class="image-item-wrapper"  @click="chooseImage" v-if="admin">
			    <image src="../../../static/img/add-img.png" class='image-item'>
			</div>
		</div>
		<div class="no-tips" v-if="imgList.length==0&&!admin">
			<div>暂未上传图片</div>
		</div>
		
		<div class="btn-wrapper" v-if="admin">
			<div class="btn" @click="showDelete">
				{{deleteFlag?'完成':'编辑'}}
			</div>
		</div>

	</div>
</template>

<script>
	let defaultJpg=require('../../../static/img/quan-active.png');
	export default {
		data() {
			return {
				admin:true,
				imgList:[],//显示的圈子图片
				img_ids:[],//上传的图片id数组
				uploadNum:0,//选择上传图片的总数
				circle_id:'',
				pageNum:1,
				deleteFlag:false
			};
		},
		computed:{
			imgUrlList(){
				return this.imgList.map(item=>{return item.img_url})
			}
		},
		methods:{
			showDelete(){
				this.deleteFlag=!this.deleteFlag
			},
			prevImg(item,index){
				//预览图片
				let _this=this
				uni.previewImage({
					current:item.img_url,
					urls:_this.imgUrlList
				})
			},
			async delImagesList(item,index){
				//删除图片
				let _this=this
				uni.showModal({
					success(e) {
						if(e.confirm==true){
							_this.delImagesListHandle(item,index)
						}
					},
					title:'确认要删除吗？'
				})
				
			},
			async delImagesListHandle(item,index){
				//删除图片的动作
				let params={
					id:item.id,
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.delCirceImages(params);
				if(res.data.level=='success'){
					this.imgList.splice(index,1)
				}
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
			},
			//选择图片
			chooseImage(){
				let _this=this;
				uni.chooseImage({
					sizeType: ['original', 'compressed'],  //可选择原图或压缩后的图片
					sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
					count: 9,
					success: res => {
						_this.uploadNum=res.tempFilePaths.length;
						_this.uploadImg(res.tempFilePaths)();
					}
				})
			
			},
			uploadImg(url){
			    var _this = this;
				var length=url.length;
				var url1=url;
				var index=0;
					return function uploadImgHanlde(){
						wx.uploadFile({
						    url: _this.$api.BASE_URL+'file/upload-img',
						    filePath: url1[index],
						    name: 'photo',
						    header: {
						        'content-type': 'application/json' // 默认值
						    },
						    success: function (res) {
						        res.data = JSON.parse(res.data);
						        if (res.data.level == 'success') {
						            _this.img_ids.push(res.data.data.id);
									if(index<_this.uploadNum-1){
										index++;
										uploadImgHanlde();
										
										_this.uploadNum--; 
									}else{
										uni.showToast({
											icon:'none',
											title:res.data.message
										})
										_this.adminUploadCircleImage()
									}
						        }else {
						            uni.showToast({
						                icon:'none',
						                title:res.data.message
						            })
									_this.uploadNum--;
									index++;
									
						        }
						    }
						})
					}
				
			
			},
			async getCircleImages(){
				//获取群相册
				let params={
					circle_id:this.circle_id,
					page:this.pageNum,
					limit:20,
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.getCircleImages(params);
				if(res.data.level=='success'){
					this.admin=res.data.data.is_admin;
					this.imgList=res.data.data.img_info
				}
			},
			async adminUploadCircleImage(){
				//上传群相册
				let params={
					circle_id:this.circle_id,
					img_ids:this.img_ids,
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.adminUploadCircleImage(params);
				this.img_ids=[];
				if(res.data.level=='success'){
					this.getCircleImages()
				}
			}
		},
		onLoad(options) {
			this.circle_id=options.circle_id;
			this.getCircleImages()
		},
		
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	.no-tips{
		margin-top:40vh;
		@include flex();
		background: #fff;
	}
	.tips{
		width:100%;
		text-align: center;
	}
	.img-wrapper{
		@include flexWrap(flex-start);
	}
	.image-item-wrapper{
		width: 33%;
		@include flex();
		position: relative;
		.image-item{
			width:216rpx;
			height:216rpx;
			border-radius:4px;
			margin:10rpx;
		}
		.del-picture-btn{
			position: absolute;
			top:0;
			right: 0;
			image{
				width:40rpx;
				height: 40rpx;
			}
		}
	}
	.btn-wrapper{
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		padding: 20rpx 0;
		background: #fff;
		.btn{
			margin-left:30rpx;
			background: #FFE226;
			font-size:32rpx;
			text-align: center;
			font-weight: 600;
			
			width:calc(100vw - 60rpx);
			border-radius: 16rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
	}
</style>
